<template>
  <div class="quick-color-test">
    <h2>🎨 快速颜色测试</h2>
    
    <div class="test-controls">
      <el-button @click="connect" :disabled="isConnected" type="primary">
        连接
      </el-button>
      <el-button @click="createRoom" :disabled="!isConnected" type="success">
        创建房间
      </el-button>
      <el-button @click="joinRoom" :disabled="!isConnected" type="warning">
        加入房间
      </el-button>
      <el-button @click="testColors" :disabled="!isConnected" type="info">
        测试颜色
      </el-button>
    </div>
    
    <div class="status">
      <p>连接: {{ isConnected ? '✅' : '❌' }}</p>
      <p>房间: {{ roomId || '无' }}</p>
      <p>当前玩家: {{ currentPlayer?.nickname || '无' }}</p>
    </div>
    
    <div class="players">
      <h3>玩家列表</h3>
      <div v-for="player in players" :key="player.id" class="player">
        <span class="name">{{ player.nickname }}</span>
        <span class="avatar" :style="{ backgroundColor: player.avatarColor }">
          {{ player.avatarColor }}
        </span>
        <span class="brush" :style="{ backgroundColor: player.brushColor }">
          {{ player.brushColor }}
        </span>
        <span v-if="player.isOwner">👑</span>
      </div>
    </div>
    
    <div class="log">
      <h3>日志</h3>
      <div v-for="log in logs.slice(-10)" :key="log" class="log-item">
        {{ log }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createSignalRService } from '@/services/socketService'
import { useGameStore } from '@/stores/game'

const gameStore = useGameStore()
const isConnected = ref(false)
const roomId = ref('')
const currentPlayer = ref(null)
const players = ref([])
const logs = ref([])

const signalRService = createSignalRService(gameStore)

function addLog(message) {
  const timestamp = new Date().toLocaleTimeString()
  logs.value.push(`[${timestamp}] ${message}`)
  if (logs.value.length > 50) logs.value.shift()
}

async function connect() {
  try {
    addLog('连接中...')
    await signalRService.connect()
    isConnected.value = true
    addLog('✅ 连接成功')
  } catch (error) {
    addLog(`❌ 连接失败: ${error.message}`)
  }
}

async function createRoom() {
  try {
    const roomCode = 'test-' + Math.random().toString(36).substr(2, 6)
    const playerId = 'player-' + Math.random().toString(36).substr(2, 9)
    
    addLog(`创建房间: ${roomCode}`)
    await signalRService.createRoom(roomCode, '测试房间', 6, '', playerId, '房主')
    roomId.value = roomCode
    addLog(`✅ 房间创建成功`)
  } catch (error) {
    addLog(`❌ 创建失败: ${error.message}`)
  }
}

async function joinRoom() {
  try {
    const playerId = 'player-' + Math.random().toString(36).substr(2, 9)
    const targetRoom = roomId.value || 'test-room'
    
    addLog(`加入房间: ${targetRoom}`)
    await signalRService.joinRoom(targetRoom, playerId, '玩家')
    addLog(`✅ 加入成功`)
  } catch (error) {
    addLog(`❌ 加入失败: ${error.message}`)
  }
}

function testColors() {
  addLog('🧪 测试颜色分配...')
  
  if (players.value.length === 0) {
    addLog('❌ 没有玩家')
    return
  }
  
  const brushColors = players.value.map(p => p.brushColor).filter(c => c)
  const uniqueColors = new Set(brushColors)
  
  addLog(`玩家数量: ${players.value.length}`)
  addLog(`画笔颜色: ${brushColors.join(', ')}`)
  addLog(`唯一颜色: ${uniqueColors.size}`)
  
  if (brushColors.length === uniqueColors.size) {
    addLog('✅ 所有玩家都有不同的画笔颜色')
  } else {
    addLog('❌ 有重复的画笔颜色')
  }
}

onMounted(() => {
  addLog('页面加载完成')
  
  // 监听游戏状态变化
  const unsubscribe = gameStore.$subscribe((mutation, state) => {
    if (mutation.type === 'patch') {
      players.value = state.players
      if (state.currentPlayer) {
        currentPlayer.value = state.currentPlayer
        addLog(`当前玩家颜色: ${state.currentPlayer.brushColor}`)
      }
    }
  })
  
  // 监听SignalR事件
  signalRService.on('Connected', () => {
    addLog('🔗 SignalR连接成功')
  })
  
  signalRService.on('PlayerJoined', (data) => {
    addLog(`👤 玩家加入: ${data.Nickname} (画笔: ${data.BrushColor})`)
  })
  
  signalRService.on('RoomCreated', (data) => {
    addLog(`🏠 房间创建: ${data.RoomCode} (画笔: ${data.BrushColor})`)
  })
  
  signalRService.on('RoomInfo', (data) => {
    addLog(`📋 房间信息: ${data.Players?.length || 0} 个玩家`)
  })
})
</script>

<style scoped>
.quick-color-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.status {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.players {
  margin-bottom: 20px;
}

.player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
  border-radius: 4px;
}

.name {
  font-weight: bold;
  min-width: 80px;
}

.avatar, .brush {
  width: 80px;
  height: 24px;
  border-radius: 4px;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-family: monospace;
}

.log {
  background: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 12px;
}

.log-item {
  margin-bottom: 5px;
}
</style>
